<template>
  <div class="out">
    <div v-for="(item,index) in newData" :key="index" class="inner" v-if="item.searchSign">
      <!-- input -->
      <div class="inp" v-if="item.type==='input'">
        <div class="font" style>{{item.CN}}</div>
        <el-input class="el_inp" size="mini" v-model="newData[index].value" placeholder="请输入内容"></el-input>
      </div>
      <!-- select -->
      <div class="inp" v-else-if="item.type==='select'">
        <div class="font">{{item.CN}}</div>
        <el-select class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" clearable>
          <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>
      </div>
      <!-- date -->
      <div class="inp" v-else-if="item.type==='date'">
        <div class="font">{{item.CN}}</div>
        <el-date-picker
          class="el_inp"
          size="mini"
          v-model="newData[index].value"
          type="datetime"
          placeholder="选择日期时间"
        ></el-date-picker>
      </div>
    </div>
  </div>
</template>
<script>
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  props: ["searchData" , "optionsZi" , "searchOptionTable"],
  data() {
    return {
      //深拷贝的searchData
      dataModel: "",
      newData: [],
      // 组件类型
      modelType:'search',
      // 请求到的option
      // ç:[],
      searchOption: [],
      // 跨表请求option
      searchOptions:[]
    };
  },
  created() {
    this.newData = JSON.parse(JSON.stringify(this.searchData)); //深拷贝
  },
  watch: {
    newData: {
      handler(newValue, oldValue) {
        this.$emit("searchCallBack", this.newData);
      },
      deep: true
    },
    optionsZi(newVal){
      this.searchOption = newVal
//      console.log(newVal,111)
    },
    searchOptionTable(newVal){
      this.searchOptions = newVal
    }
  },
  // components:{
  //   dictionaries
  // },
  methods:{
    // 字典回调
    // dictionariesCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOption = res     
    //   // console.log(this.searchOption,'ceshiyixia');
      
    // },
    // 跨表字典回调
    // dictionariesTableCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOptionTable = res     
    //   // console.log(this.searchOption,'ceshiyixia');
      
    // },
  }
};
</script>
<style lang="scss" scoped>
.out {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 25px 10px;
  .inner {
    width: 25%;
    display: flex;
    padding: 0px 15px;
    .font {
      width: 160px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      // background: forestgreen;
    }
    .inp {
      flex: 100;
      display: flex;
      margin: 7.5px 0px;
      .el_inp {
        width: 100%;
      }
    }
  }
  .innerbtn {
    width: 25%;
    padding: 7.5px 20px;
  }
}
</style>
